<template>
  <md-nav-bar title="材料下载" />
  <view class="container">
    <view class="list">
      <view class="item" v-for="item in data.list" :key="item.id">
        <view class="left flex-l">
          <md-icon :url="item.icon" width="100" height="100" />
          <view class="m-left-30">{{ item.name }}</view>
        </view>
        <view class="right flex-l">
          <md-icon name="download" />
          <view class="m-left-10" @click="() => handleDownload(item.url)">下载</view>
        </view>
      </view>
    </view>
    <mescroll-empty v-if="data.list.length == 0"></mescroll-empty>
  </view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app';
import { reactive } from 'vue';
// 接口
import { activeFileList } from '@/api/index';

const data = reactive<any>({
  list: [],
});

// 文件下载预览
const handleDownload = (url: string) => {
  if (!url) return;
  uni.showLoading({
    title: '下载中...',
    mask: true,
  });
  uni.downloadFile({
    url,
    success: function (res) {
      var filePath = res.tempFilePath;
      uni.openDocument({
        filePath: filePath,
        showMenu: true,
        success: function (res) {
          console.log('打开文档成功');
          uni.hideLoading();
        },
      });
    },
  });
};

/**
 * 接口相关
 */

const fetchActiveFileList = async (active_id: number) => {
  try {
    const res = await activeFileList({
      active_id,
    });
    data.list = res.data;
  } catch (error) {}
};

onLoad(option => {
  fetchActiveFileList(option?.active_id);
});
</script>

<style lang="scss" scoped>
.container {
  padding: 40rpx;
  .list {
    .item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 122rpx;
      background: #ffffff;
      border-radius: 20rpx;
      padding: 0 20rpx 0 10rpx;
      box-sizing: border-box;
      margin-bottom: 20rpx;
    }
  }
}
</style>
